import React, { useState } from 'react'
import './style.css';
import { useSelector } from 'react-redux'
const Index = () => {
  const username = useSelector(state => state.username)
  const list = [
    ["旭旭", "小薇薇", "小琪琪", "萌萌"],
    ["三千哥", "小勇", "小菲菲", "彭浩"],
    ["神风衣", "班长", "程序慢", "一刀狂魔"],
  ]

  const random = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }
  const [xx, setX] = useState(0)
  const [yy, setY] = useState(0)
  const start = () => {
    const x = random(0, 2)
    const y = random(0, 3)
    setX(x)
    setY(y)
    const timer = setInterval(() => {
      const x = random(0, 2)
      const y = random(0, 3)
      setX(x)
      setY(y)
    }, 100)

    setTimeout(() => {
      clearInterval(timer)
    }, 3000)

  }

  return (
    <div>
      <div>
        <ul>
          {
            list.map((v, x) => {
              return <li key={x} style={{ display: 'flex', justifyContent: 'center' }}>
                <ol>
                  {
                    v.map((v, y) => {
                      return <li key={y} style={{ backgroundColor: x === xx && y === yy ? 'red' : '' }}>{v}</li>
                    })
                  }
                </ol>
              </li>
            })
          }
        </ul>
        <div style={{ textAlign: 'center' }}>
          <button onClick={start}>抽取名单</button>
        </div>
        <div>{username}</div>
      </div>
    </div>
  )
}

export default Index